#main{
	position: relative;
}
#mapContainer{
	
  width: 100%;
  height: 700px;
  position: relative;
  background-color: #ddd;
}
.ftWeather{
	height: 500px;
	width: 750px;
	background-color: #fff;
	position: relative;
	/*left: 0px;
	top: 0px;*/
	border-radius: 10px;
	padding: 10px;
	z-index: 20;
	

}
.ftWeather h2{
	padding: 0px 10px 10px 10px;
}
.ftTable {
	width: 100%;
	overflow-x:scroll;
	overflow-y: visible;
}
.ftNav li{
	float: left;
	padding: 5px 10px;
	font-size: 20px;
	text-align: center;
	background: #aaa;
	margin-right: 10px;
	border-radius: 5px;
	width: 160px;
	cursor: pointer;
}
.ftNav li.active{
	background-color: #880;
	color: #eee;
}
.ftData{
	margin-top:10px;
	width:1505px; 
	border-collapse: collapse;
	border:none;
	text-align: center;
}
.ftData thead{
	background-color: #eee;
}
.ftData th,.ftData td{
	width: 65px;
	position: relative;
	width: 60px;
	height: 60px;
	font-size: 12px;
	border:1px solid #ddd;
	text-align: center;
}
.ftData td img.icon{
	position: absolute;
	width: 65px;
	height: 65px;
	margin-left: -32px;
    top: 50%;
    left: 50%;
    margin-top: -32px;
	/*left: 0px;
    top: 0px*/

}
.ftData td.active{
	width: 65px;
	background-color: #eee;	
}
.ftData td i{
	float: left;
	width: 100%;
	/*width: 20px;*/
	height: 20px;
	/*background-image: url("/assets/imgs/GetWindAngleImage.png");*/
	position: relative;
	/*left: 50%;
	margin-left: -10px;*/
}
.ftData td b{
	float: left;
	width: 80%;
	height: 25%;
	background-color:#d2fe09;
	position: relative;
	bottom: -7px;
    margin-left: 10%;
    line-height: 120%;
	/*margin-bottom: 0px;*/
}
.ftData td span.rain{
	display: inline-block;
	padding: 3px 12px;
	background-color:#d2fe09;
}
.ftData td b.six{
	background-color: #d2fe09;
}
.ftData td b.seven{
	background-color:#fcfe00;
}
.icon-cloudy,.icon-sun2{
	color: #fcfe00;
}
.ftWeather>i,.sign>i{
	position: absolute;
	width: 0;
	height: 0;
	border:40px solid transparent;
	border-top-color: #fff;
	left: 50%;
	margin-left:-20px;
	bottom: -68px;
	/*top: 0px;*/
	right: 0px;
	/*background-color: */
	/*border-radius: 50%;*/
}
.close{
  position: absolute;
  top: 0px;
  right: -1px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 100;
  font-size: 18px;
  cursor: pointer;
}
.close:hover{
	background-color: #e4393c;
	color: #fff;
}
.sign{
	width: 80px;
	height: 50px;
	/*position: absolute;
	left: 100px;
	top:100px;*/
	/*background-color: #ddd;*/
	z-index: 20;
	text-align: center;
	/*border-radius: 10px;*/
}
.sign span{
	padding-left: 0;
 
    width: 100%;
    display: -webkit-inline-box;
    display:inline-block;
}
/*.sign>i{
	border-width: 20px;
	border-top-color:#ddd; 
	bottom: -40px;

}*/
/*#main .qxmap-popup-content-wrapper{
	background-color: rgba(255,255,255,0);
	border-color: transparent;
	box-shadow: 0 3px 14px rgba(0,0,0,0)
	
}
#main  .qxmap-popup-tip-container{
	display: none;
}
#main .qxmap-popup-pane{
	display: none;
}*/
#main .qxmap-popup{
	bottom:-8px !important;
	z-index: 100;
}
.qxmap-popup-content{
	width: auto !important;
}
.qxmap-popup-close-button{
	z-index: 23;
}
.qxmap-marker-icon{
    margin-top: -65px !important;
}
#main .polygon-text,#main .polyline-text{
    color: #333;
    margin-top: -4px;
    margin-left: -74px;
    z-index: 0;
}
/*切换时间段*/
.changeTime{

    width: 732px;
    height: 60px;
    border: 1px solid transparent;
    position: absolute;
    bottom: 60px;
    /*background-color: blue;*/
    left: 50%;
	margin-left: -355px;
	background-color: #eeeeee;
	padding:10px;
   
}
.changeTime button{
    width: 20px;
    height:100%;

}
.changeTime ul{
    float: left;
    width: 91%; 
    overflow: hidden;
    margin-left: 15px;
    height: 100%;
}
.changeTime ul>li{
    float: left;
    /**/
    width: 70px;
    height: 100%;
    margin: 0px 5px;
    text-align: center;
    padding:10px 0 5px 0;
    position: relative;
}
.changeTime ul>li.active .upRect{
   background-color: #ff0; 
}
.changeTime ul>li>span{
    float: left;
    width: 100%;
    height: 50%;
    /*background-color: yellow;*/
}
.changeTime ul>li .upRect{
    background-color:#3879D9;
    height: 30%;
}
.changeTime i{
    position: absolute;
    /*width: */
    left: -7px;
    bottom: 13px;
    padding-top: 1px ;
    border-left: 2px solid yellow;
    height: 20px; 
}
.changeTime b{
    position: absolute;
    left: -21px;
    bottom: -2px;
    color:#e4393c;

}
/*色标*/
.colorCode{
	/*padding: 10px;*/
	/*background-color: #eeeeee;*/
	/*width: 800px;*/
	left:27%;
  position: absolute;
  /*left: 256px;*/
  bottom: 20px; 
  z-index: 30;
	/*margin-left: -400px;*/

}
.colorCode>p{
    float: left;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    font-weight: bolder;
}
.colorCode>ul{
    float: left;
}
.colorCode li{
    float: left;
    width: 40px;
    
    height: 25px;
    margin-left: 1px;
}
.colorCode li>span{
    float: left;
    width: 100%;
    height: 50%;
    
    text-align: center;
}
#main .qxmap-control-vector-grid_component{
	right: auto;
}
/*降雨，风力，雷电切换*/
.tabTime{
	position: absolute;
	right: 10px;
	top: 30%;
	/*background-color:#fff;*/
	padding:5px 10px;
}
.tabTime li{
	width: 100px;
	height: 30px;
	cursor: pointer;
	background-color:#fff;
	padding: 5px 10px;
	margin-top: 10px;
	border-radius: 5px;
}
.tabTime li.active{
	color: #fff;
	background-color: #3879D9;
}
#main .qxmap-control-mapsource{
	display: none;
}
.warningWether{
	width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top:-100px;
    line-height: 200px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-radius:10px;
    background-color: rgba(0,0,255,.8);
}
/*航道样式*/
.channel{
  position: absolute;
  bottom: 200px;
  left: 10px;
  z-index: 10;
  /*background-color:#071E66;*/
  color: #ddd;
  padding: 2px;
}
.channel  ul li{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #2c63a5;
  line-height: 80px;
  text-align: center;
  margin-bottom: 10px;
  box-shadow:5px 5px 5px #888;
  cursor: pointer;
}
.channel  ul li:hover{
  background-color: #aaa;
  color: #333;

}
.channel  ul li.hover{

}
.rt-content {
	float: right;
	width: 30%;
	height: 700px;
	background:#fff;
	/*padding:0 10px;*/
}
.rt-content ul{
	width: 100%;
	height: 50px;
}
.rt-content ul li{
	float: left;
	width: 50%;
	height: 50px;
	background-color: #eee;
	
	line-height: 50px;
	text-align: center;
	/*margin-bottom: 10px;*/
	/*box-shadow:5px 5px 5px #888;*/
	cursor: pointer;
	color: #333;
}
.rt-content ul li.active{
	background-color: #2c63a5;
	color: #fff;
}
.publishTime{
	text-align: right;
	margin-top: 50px;
}
.rt-content p{
	/*margin: 10px 10;*/
	padding:5px 10px;
}
.rt-content p.txt{
text-indent: 20px;
}
.qxmap-map-pane{
	/*z-index: 15;*/
}
